<!DOCTYPE HTML>
<html lang="en-US" >
    
    <head>
        
        <meta charset="UTF-8">
        <title>新特性 | 新浪微博开发笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 1.0.3">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    
    
    
    <link rel="next" href="../newfeature/welcome.html" />
    
    
    <link rel="prev" href="../newfeature/README.html" />
    

        
    </head>
    <body>
        
        
<link rel="stylesheet" href="../gitbook/style.css">


        
    <div class="book"  data-level="0.7.1" data-basepath=".." data-revision="1446913807342">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
    	
    	
    	

        

        
    
        
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                        <i class="fa fa-check"></i>
                        
                         新浪微博笔记
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.1" data-path="project init/prepare project.html">
            
                
                    <a href="../project init/prepare project.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.</b>
                        
                         准备工作
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.1.1" data-path="project init/project deploy.html">
            
                
                    <a href="../project init/project deploy.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.1.</b>
                        
                         项目部署
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.1.2" data-path="project init/project settings.html">
            
                
                    <a href="../project init/project settings.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.2.</b>
                        
                         项目设置
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.1.3" data-path="project init/confirm architecture.html">
            
                
                    <a href="../project init/confirm architecture.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.3.</b>
                        
                         架构确定
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.1.4" data-path="project init/mvvm.html">
            
                
                    <a href="../project init/mvvm.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.4.</b>
                        
                         MVVM
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.2" data-path="create project/readme.html">
            
                
                    <a href="../create project/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.</b>
                        
                         项目搭建
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.2.1" data-path="create project/create files.html">
            
                
                    <a href="../create project/create files.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.1.</b>
                        
                         创建文件
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2.2" data-path="create project/add child controllers.html">
            
                
                    <a href="../create project/add child controllers.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.2.</b>
                        
                         添加子控制器
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2.3" data-path="create project/custom main tabbar.html">
            
                
                    <a href="../create project/custom main tabbar.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.3.</b>
                        
                         自定义 TabBar
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2.4" data-path="create project/summary.html">
            
                
                    <a href="../create project/summary.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.4.</b>
                        
                         阶段性小结
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.3" data-path="visitor/readme.html">
            
                
                    <a href="../visitor/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.</b>
                        
                         访客视图
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.3.1" data-path="visitor/base table view controller.html">
            
                
                    <a href="../visitor/base table view controller.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.1.</b>
                        
                         表格视图控制器基类
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.2" data-path="visitor/visitor login view.html">
            
                
                    <a href="../visitor/visitor login view.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.2.</b>
                        
                         用户登录视图
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.3" data-path="visitor/setup login info.html">
            
                
                    <a href="../visitor/setup login info.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.3.</b>
                        
                         设置未登录信息
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.4" data-path="visitor/home animation.html">
            
                
                    <a href="../visitor/home animation.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.4.</b>
                        
                         首页动画
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.5" data-path="visitor/login buttons delegate.html">
            
                
                    <a href="../visitor/login buttons delegate.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.5.</b>
                        
                         登录&amp;注册代理回调
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.6" data-path="visitor/appearance.html">
            
                
                    <a href="../visitor/appearance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.6.</b>
                        
                         导航栏全局外观
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.4" data-path="frameworks/readme.html">
            
                
                    <a href="../frameworks/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.</b>
                        
                         第三方框架
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.4.1" data-path="frameworks/afnetworking.html">
            
                
                    <a href="../frameworks/afnetworking.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.1.</b>
                        
                         AFNetworking
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.2" data-path="frameworks/svprogresshud sdwebimage.html">
            
                
                    <a href="../frameworks/svprogresshud sdwebimage.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.2.</b>
                        
                         SVProgressHUD 和 SDWebImage
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.3" data-path="frameworks/snapkit.html">
            
                
                    <a href="../frameworks/snapkit.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.3.</b>
                        
                         SnapKit
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.5" data-path="oauth/readme.html">
            
                
                    <a href="../oauth/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.</b>
                        
                         OAuth
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.5.1" data-path="oauth/register app.html">
            
                
                    <a href="../oauth/register app.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.1.</b>
                        
                         注册应用程序
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.5.2" data-path="oauth/load oauth page.html">
            
                
                    <a href="../oauth/load oauth page.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.2.</b>
                        
                         加载授权页面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.6" data-path="access token/readme.html">
            
                
                    <a href="../access token/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.</b>
                        
                         Access Token
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.6.1" data-path="access token/load access token.html">
            
                
                    <a href="../access token/load access token.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.1.</b>
                        
                         加载 AccessToken
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.2" data-path="access token/user account.html">
            
                
                    <a href="../access token/user account.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.2.</b>
                        
                         用户账户模型
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.3" data-path="access token/expires date.html">
            
                
                    <a href="../access token/expires date.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.3.</b>
                        
                         过期日期
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.4" data-path="access token/load user info.html">
            
                
                    <a href="../access token/load user info.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.4.</b>
                        
                         加载用户信息
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.5" data-path="access token/archive user account.html">
            
                
                    <a href="../access token/archive user account.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.5.</b>
                        
                         归档 &amp; 解档
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.6" data-path="access token/view model.html">
            
                
                    <a href="../access token/view model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.6.</b>
                        
                         视图模型
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.7" data-path="access token/error enum.html">
            
                
                    <a href="../access token/error enum.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.7.</b>
                        
                         自定义错误枚举
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.7" data-path="newfeature/README.html">
            
                
                    <a href="../newfeature/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.</b>
                        
                         新特性和欢迎界面
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter active" data-level="0.7.1" data-path="newfeature/newfeature.html">
            
                
                    <a href="../newfeature/newfeature.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.1.</b>
                        
                         新特性
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.7.2" data-path="newfeature/welcome.html">
            
                
                    <a href="../newfeature/welcome.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.2.</b>
                        
                         欢迎界面
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.7.3" data-path="newfeature/switch vc.html">
            
                
                    <a href="../newfeature/switch vc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.3.</b>
                        
                         切换界面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.8" data-path="appendix/readme.html">
            
                
                    <a href="../appendix/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.</b>
                        
                         附录
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.8.1" data-path="appendix/image assets.html">
            
                
                    <a href="../appendix/image assets.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.1.</b>
                        
                         图片素材
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.8.2" data-path="appendix/cocoa pod.html">
            
                
                    <a href="../appendix/cocoa pod.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.2.</b>
                        
                         cocoa pod
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.8.3" data-path="appendix/singleton.html">
            
                
                    <a href="../appendix/singleton.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.3.</b>
                        
                         单例
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.8.4" data-path="appendix/swift_vs_oc.html">
            
                
                    <a href="../appendix/swift_vs_oc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.4.</b>
                        
                         为什么要学习 Swift
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">Twitter</button>
                <button type="button" data-sharing="google-plus" class="button">Google</button>
                <button type="button" data-sharing="facebook" class="button">Facebook</button>
                <button type="button" data-sharing="weibo" class="button">Weibo</button>
                <button type="button" data-sharing="instapaper" class="button">Instapaper</button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
    
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >新浪微博开发笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-gitbook_264">
                    
                        <h1 id="">新特性</h1>
<h2 id="">目标</h2>
<ul>
<li><code>collectionView</code>的使用</li>
<li><code>collectionView</code>的布局技巧</li>
</ul>
<h2 id="">准备文件</h2>
<ul>
<li>将新特性图片素材拖拽到 Images.xcsets 中</li>
<li>在 <code>View</code> 下建立 <code>NewFeature</code> 目录</li>
<li>新建 <code>NewFeatureViewController.swift</code> 继承自 <code>UICollectionViewController</code></li>
<li>在 <code>NewFeatureViewController.swift</code> 的末尾添加如下代码：</li>
</ul>
<h2 id="">代码实现</h2>
<h3 id="-init-">实现 <code>init()</code> 函数简化外部调用</h3>
<ul>
<li>修改 <code>AppDelegate</code> 的根视图控制器</li>
</ul>
<pre><code class="lang-swift">window?.rootViewController = <span class="hljs-type">NewFeatureViewController</span>()
</code></pre>
<blockquote>
<p>运行测试，崩溃！</p>
</blockquote>
<pre><code>reason: &#39;UICollectionView must be initialized with a non-nil layout parameter
</code></pre><ul>
<li><p>原因：实例化 <code>CollectionViewController</code> 时必须指定布局参数</p>
</li>
<li><p>实现 <code>init()</code> 简化外部调用</p>
</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// MARK: - 构造函数</span>
<span class="hljs-keyword">init</span>() {
    <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(collectionViewLayout: <span class="hljs-type">UICollectionViewFlowLayout</span>())
}

required <span class="hljs-keyword">init</span>?(coder aDecoder: <span class="hljs-type">NSCoder</span>) {
    fatalError(<span class="hljs-string">"init(coder:) has not been implemented"</span>)
}
</code></pre>
<h4 id="">小结</h4>
<ul>
<li>注意：在 OC 中，不是所有的对象的指定构造函数都是 <code>init()</code></li>
<li><code>NSObject</code> 的指定构造函数是 <code>init()</code></li>
<li><code>UIViewController</code> 的指定构造函数是 <code>initWithNibName</code></li>
<li><code>UICollectionViewController</code> 的指定构造函数是 <code>initWithViewLayout...</code></li>
<li><code>UIView</code> 的指定构造函数是 <code>initWithFrame</code></li>
<li>在查阅头文件时，通常会有 <code>designated initializer</code> 标注</li>
<li>如果没有 <code>designated initializer</code>，可以考虑头文件中的第一个构造函数</li>
</ul>
<h3 id="">数据源</h3>
<ul>
<li>定义常量</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 可重用标识符号</span>
private <span class="hljs-keyword">let</span> <span class="hljs-type">WBNewFeatureReuseIdentifier</span> = <span class="hljs-string">"Cell"</span>
<span class="hljs-comment">/// 新特性图片数量</span>
private <span class="hljs-keyword">let</span> <span class="hljs-type">WBNewFeatureCount</span> = <span class="hljs-number">4</span>
</code></pre>
<ul>
<li>注册可重用 Cell</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span> </span>{
    <span class="hljs-keyword">super</span>.viewDidLoad()

    <span class="hljs-comment">// 注册可重用 Cell</span>
    <span class="hljs-keyword">self</span>.collectionView!.registerClass(<span class="hljs-type">UICollectionViewCell</span>.<span class="hljs-keyword">self</span>, forCellWithReuseIdentifier: <span class="hljs-type">WBNewFeatureReuseIdentifier</span>)
}
</code></pre>
<ul>
<li>数据源方法</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// MARK: UICollectionViewDataSource</span>
<span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">collectionView</span><span class="hljs-params">(collectionView: UICollectionView, numberOfItemsInSection section: Int)</span> -&gt; <span class="hljs-title">Int</span> </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-type">WBNewFeatureCount</span>
}

<span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">collectionView</span><span class="hljs-params">(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath)</span> -&gt; <span class="hljs-title">UICollectionViewCell</span> </span>{
    <span class="hljs-keyword">let</span> cell = collectionView.dequeueReusableCellWithReuseIdentifier(<span class="hljs-type">WBNewFeatureReuseIdentifier</span>, forIndexPath: indexPath)

    cell.backgroundColor = (indexPath.item % <span class="hljs-number">2</span> == <span class="hljs-number">0</span>) ? <span class="hljs-type">UIColor</span>.redColor() : <span class="hljs-type">UIColor</span>.greenColor()

    <span class="hljs-keyword">return</span> cell
}
</code></pre>
<h3 id="">布局</h3>
<ul>
<li>定义布局</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 准备布局</span>
private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">prepareLayout</span><span class="hljs-params">()</span> </span>{
    <span class="hljs-comment">// 设置布局</span>
    <span class="hljs-keyword">let</span> layout = collectionView?.collectionViewLayout <span class="hljs-keyword">as</span>? <span class="hljs-type">UICollectionViewFlowLayout</span>
    layout?.itemSize = view.bounds.size
    layout?.minimumInteritemSpacing = <span class="hljs-number">0</span>
    layout?.minimumLineSpacing = <span class="hljs-number">0</span>
    layout?.scrollDirection = .<span class="hljs-type">Horizontal</span>

    collectionView?.pagingEnabled = <span class="hljs-built_in">true</span>
    collectionView?.showsHorizontalScrollIndicator = <span class="hljs-built_in">false</span>
    collectionView?.bounces = <span class="hljs-built_in">false</span>
}
</code></pre>
<h4 id="">小结</h4>
<ul>
<li><code>UICollectionViewController</code> 中的 <code>view</code> 不是 <code>collectionView</code></li>
<li>可以通过 <code>collectionView?.collectionViewLayout</code> 获取到 <code>collectionView</code> 的布局</li>
<li>要设置布局属性，一定要做类型转换 <code>UICollectionViewFlowLayout</code></li>
</ul>
<h3 id="-cell">自定义 Cell</h3>
<ul>
<li>定义 <code>NewFeatureCell</code></li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 新特性 Cell</span>
private <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NewFeatureCell</span>: <span class="hljs-title">UICollectionViewCell</span> </span>{

}
</code></pre>
<h4 id="">阶段性小结</h4>
<ul>
<li>在 Swift 和 OC 中都允许在同一个文件中定义多个类的情况</li>
<li>以前上课很少用原因时担心影响大家对代码结构的理解，但是实际开发中，这种情况还是比较普遍的</li>
<li>一个文件包含多个类的情景<ul>
<li>被包含类仅供当前类使用</li>
<li>被包含类的代码很少</li>
</ul>
</li>
</ul>
<h3 id="-cell-">自定义 Cell 代码实现</h3>
<ul>
<li>定义 NewFeatureCell</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 新特性 Cell</span>
private <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">NewFeatureCell</span>: <span class="hljs-title">UICollectionViewCell</span> </span>{

    <span class="hljs-comment">// MARK: - 构造函数</span>
    <span class="hljs-keyword">override</span> <span class="hljs-keyword">init</span>(frame: <span class="hljs-type">CGRect</span>) {
        <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(frame: frame)

        contentView.addSubview(iconView)
        iconView.frame = bounds
    }

    required <span class="hljs-keyword">init</span>?(coder aDecoder: <span class="hljs-type">NSCoder</span>) {
        fatalError(<span class="hljs-string">"init(coder:) has not been implemented"</span>)
    }

    <span class="hljs-comment">// MARK: - 懒加载控件</span>
    private lazy <span class="hljs-keyword">var</span> iconView = <span class="hljs-type">UIImageView</span>()
}
</code></pre>
<ul>
<li>在 Cell 中定义图像索引属性</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 图像索引</span>
<span class="hljs-keyword">var</span> imageIndex: <span class="hljs-type">Int</span> = <span class="hljs-number">0</span> {
    <span class="hljs-keyword">didSet</span> {
        iconView.image = <span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"new_feature_<span class="hljs-subst">\(imageIndex + <span class="hljs-number">1</span>)</span>"</span>)
    }
}
</code></pre>
<ul>
<li>修改数据源方法，设置图像</li>
</ul>
<pre><code class="lang-swift">cell.imageIndex = indexPath.item
</code></pre>
<blockquote>
<p>运行测试</p>
</blockquote>
<ul>
<li>定义按钮</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 开始体验按钮</span>
private lazy <span class="hljs-keyword">var</span> startButton: <span class="hljs-type">UIButton</span> = <span class="hljs-type">UIButton</span>(title: <span class="hljs-string">"开始体验"</span>, fontSize: <span class="hljs-number">18</span>, color: <span class="hljs-type">UIColor</span>.whiteColor(), backImageName: <span class="hljs-string">"new_feature_finish_button"</span>)
</code></pre>
<ul>
<li>设置按钮布局</li>
</ul>
<pre><code class="lang-swift">startButton.snp_makeConstraints { (make) -&gt; <span class="hljs-type">Void</span> <span class="hljs-keyword">in</span>
    make.centerX.equalTo(contentView.snp_centerX)
    make.bottom.equalTo(contentView.snp_bottom).offset(-<span class="hljs-number">160</span>)
}
</code></pre>
<h4 id="">阶段性小结</h4>
<ul>
<li>在自定义 <code>tableViewCell</code> 和 <code>collectionViewCell</code> 时都应该将控件添加到 <code>contentView</code> 上</li>
<li><code>collectionViewCell</code> 的构造函数中的 <code>frame</code> 大小取决于 layout 的 itemSize</li>
<li>如 <code>iconView</code> 这样全屏的控件不需要指定自动布局</li>
</ul>
<h3 id="--">动画显示 <code>开始体验</code> 按钮</h3>
<ul>
<li>在 <code>NewFeatureCell</code> 中添加 <code>showStartButton</code> 函数</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 动画显示开始按钮</span>
private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">showStartButton</span><span class="hljs-params">()</span> </span>{
    startButton.hidden = <span class="hljs-built_in">false</span>
    startButton.transform = <span class="hljs-type">CGAffineTransformMakeScale</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>)
    startButton.userInteractionEnabled = <span class="hljs-built_in">false</span>

    <span class="hljs-type">UIView</span>.animateWithDuration(<span class="hljs-number">0.8</span>, delay: <span class="hljs-number">0.0</span>, usingSpringWithDamping: <span class="hljs-number">0.8</span>, initialSpringVelocity: <span class="hljs-number">0</span>, options: [], animations: {
            <span class="hljs-keyword">self</span>.startButton.transform = <span class="hljs-type">CGAffineTransformIdentity</span>
        }) { <span class="hljs-number">_</span> <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">self</span>.startButton.userInteractionEnabled = <span class="hljs-built_in">true</span>
    }
}
</code></pre>
<ul>
<li>在 <code>collectionView</code> 的 <code>完成显示Cell</code> 代理方法中添加以下代码：</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 参数 cell, indexPath 是前一个 cell 和 indexPath</span>
<span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">collectionView</span><span class="hljs-params">(collectionView: UICollectionView, didEndDisplayingCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath)</span> </span>{

    <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> path = collectionView.indexPathsForVisibleItems().last <span class="hljs-keyword">where</span> path.item == (<span class="hljs-type">WBNewFeatureCount</span> - <span class="hljs-number">1</span>) {
        (collectionView.cellForItemAtIndexPath(path) <span class="hljs-keyword">as</span>? <span class="hljs-type">NewFeatureCell</span>)?.showStartButton()
    }
}
</code></pre>
<blockquote>
<p>注意：参数中的 <code>cell</code> &amp; <code>indexPath</code> 是之前消失的 <code>cell</code>，而不是当前显示的 <code>cell</code> 的</p>
</blockquote>
<h3 id="">添加按钮监听方法</h3>
<ul>
<li>实现按钮点击方法</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 点击开始按钮</span>
<span class="hljs-preprocessor">@objc</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">clickStartButton</span><span class="hljs-params">()</span> </span>{
    <span class="hljs-built_in">print</span>(<span class="hljs-string">"开始体验"</span>)
}
</code></pre>
<ul>
<li>添加按钮监听方法</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 添加监听方法</span>
startButton.addTarget(<span class="hljs-keyword">self</span>, action: <span class="hljs-string">"clickStartButton"</span>, forControlEvents: .<span class="hljs-type">TouchUpInside</span>)
</code></pre>
<h3 id="">隐藏状态栏</h3>
<pre><code class="lang-swift"><span class="hljs-keyword">override</span> <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">prefersStatusBarHidden</span><span class="hljs-params">()</span> -&gt; <span class="hljs-title">Bool</span> </span>{
    <span class="hljs-keyword">return</span> <span class="hljs-built_in">true</span>
}
</code></pre>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../newfeature/README.html" class="navigation navigation-prev " aria-label="Previous page: 新特性和欢迎界面"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../newfeature/welcome.html" class="navigation navigation-next " aria-label="Next page: 欢迎界面"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
